<form class="layui-form seller-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <a class="layui-btn layui-btn-sm" href="{:url('manage/store/index')}"><i class="layui-icon">&#xe603;</i> 返回</a>
            <button type="button" class="layui-btn layui-btn-sm add-store"><i class="layui-icon">&#xe608;</i> 添加</button>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属门店：</label>
            <div class="layui-input-inline seller-inline-3">
                <select name="id" id="id">
                    <option value="">-- 全部 --</option>
                    {foreach $store as $v}
                    <option value="{$v.id}" {if $id == $v.id}selected{/if}>{$v.store_name}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-submit lay-filter="*"><i class="iconfont icon-chaxun"></i>筛选</button>
        </div>
    </div>
</form>

<div class="table-body">
    <table class="layui-table" id="clerkTable" lay-filter="clerkTable"></table>
</div>

<script>
    layui.use(['table','form'], function(){
        var table = layui.table,form = layui.form;

        table.render({
            elem: '#clerkTable',
            height: 'full-220',
            cellMinWidth: '80',
            page: 'true',
            limit:'20',
            id:'clerkTable',
            url: "{:url('Store/clerkList')}",
            where: {
                id: "{$id}"
            },
            response: {
                statusName: 'status',
                statusCode: 1
            },
            cols: [[ //标题栏
                {type: 'numbers'},
                {field: 'store_name',  title: '店铺名称'},
                {field: 'user_nickname', title: '店员昵称'},
                {field: 'user_mobile',  title: '店员手机号'},
                {field: 'ctime',  title: '关联时间'},
                {title:'操作',align:'center',toolbar:'#clerkBar'}
            ]] //设置表头
        });

        $(document).on('click','.add-store',function(){
           window.location.href = "{:url('manage/store/addClerk')}?store_id={$id}";
        });

        //监听工具条
        table.on('tool(clerkTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除么', {icon:3}, function(index){
                    JsGet("{:url('manage/store/delClerk')}?id="+data.id, function(res){
                        if(res.status){
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);//向服务端发送删除指令
                        }
                        layer.msg(res.msg);
                    });
                });
            }
        });

        //筛选条件
        form.on('submit(*)', function(data){
            layui.table.reload('clerkTable', {
                where: data.field,
                page: {curr: 1}
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>

<script type="text/html" id="clerkBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>